<template>
  <div class="app-container">
    <el-row>
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 5px 5px">
        <el-form ref="queryForm" :inline="true" :model="queryData">
          <el-form-item prop="selBLine">
            <el-input v-model="queryData.selBLine" placeholder="公交线路" @blur="changeBLine" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.selBDir" placeholder="请选择线路方向" @change="changeBdir">
              <el-option
                v-for="item in selBDirs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.selBStop" placeholder="请选择站点">
              <el-option
                v-for="item in selBStops"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="fr p-r-10">
            <el-button class="filter-item" type="primary" round icon="el-icon-search" @click="changeBStop">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>

    <el-row>
      <el-card shadow="hover" style="margin:0 0 5px 5px">
        <div ref="busTimeInfo" style="overflow-x: auto" />
      </el-card>
      <el-card shadow="hover" style="margin:0 0 15px 5px">
        <baidu-map :style="'{width: 100%; height: ' + mapHeight + 'px;}'" ak="Ykv5kItIHoOtTfK7VNkY1E0MbHpwq8Xm" :center="center" :zoom="zoom" :scroll-wheel-zoom="false" @ready="handlerInitMap">
          <bm-control>
            <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 1 }">
              <el-input v-model="keyword" placeholder="请输入地名关键字" />
            </bm-auto-complete>
          </bm-control>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-local-search :keyword="keyword" :auto-viewport="true" />
          <bm-bus :keyword="selBLineNo" :auto-viewport="true" :select-first-result="true" :location="location" />
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :auto-location="true" :show-address-bar="true" />
        </baidu-map>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmControl from 'vue-baidu-map/components/controls/Control.vue'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
import BmAutoComplete from 'vue-baidu-map/components/others/AutoComplete.vue'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
import BmBus from 'vue-baidu-map/components/search/Bus.vue'
const htmlparser = require('htmlparser2')

export default {
  components: { BaiduMap, BmControl, BmNavigation, BmAutoComplete, BmLocalSearch, BmGeolocation, BmBus },
  data() {
    return {
      ak: 'Ykv5kItIHoOtTfK7VNkY1E0MbHpwq8Xm',
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      queryData: {
        selBLine: '',
        selBDir: '',
        selBStop: ''
      },
      mapHeight: document.documentElement.scrollHeight - 326,
      selBDirs: [],
      selBStops: [],
      selBLineNo: '',
      location: '北京',
      keyword: ''
    }
  },
  methods: {
    handlerInitMap({ BMap, map }) {

    },
    changeBLine() {
      this.queryData.selBDir = ''
      this.queryData.selBStop = ''
      this.selBDirs = []
      this.selBStops = []
      this.busTimeInfo = ''
      const busNo = this.queryData.selBLine
      if (busNo) {
        this.$http.get(`${process.env.VUE_APP_MODULE_ADMIN_API}/public/bus/dir`, {
          params: {
            'selBLine': busNo
          }
        }).then(response => {
          const doms = htmlparser.parseDOM(response.param)
          doms.forEach(element => {
            this.selBDirs.push({
              label: element.children[0].data,
              value: element.attribs.value
            })
          })
        }).catch(() => {})
      }
    },
    changeBdir() {
      this.$http.get(`${process.env.VUE_APP_MODULE_ADMIN_API}/public/bus/stop`, {
        params: {
          'selBDir': this.queryData.selBDir
        }
      }).then(response => {
        this.selBStops = []
        const doms = htmlparser.parseDOM(response.param)
        this.selBLineNo = this.queryData.selBLine
        doms.forEach(element => {
          this.selBStops.push({
            label: element.children[0].data,
            value: element.attribs.value
          })
        })
      }).catch(() => {})
    },
    changeBStop() {
      this.$refs.busTimeInfo.innerHTML = ''
      this.$http.get(`${process.env.VUE_APP_MODULE_ADMIN_API}/public/bus/time`, {
        params: {
          'selBLine': this.queryData.selBLine,
          'selBDir': this.queryData.selBDir,
          'selBStop': this.queryData.selBStop
        }
      }).then(response => {
        const obj = JSON.parse(response.param)
        this.$refs.busTimeInfo.innerHTML = obj.html
      }).catch(() => {})
    }
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 300px;
}
.inquiry_header {
    text-align: center;
}
.inquiry_header .inner {
    color: orangered;
}
.inquiry_main {
    text-align: center;
    margin-top: 5px;
}
.inquiry_main ul li div i.busc {
  background: url('') center;
  display: block;
  width: 15px;
  height: 15px;
  background-size: contain;
}
.inquiry_main ul {
    display: inline-flex;
}
.inquiry_main li {
    width: 12px;
    margin-right: 5px;
    list-style:none;
}
.inquiry_footer {
    display: none;
    text-align: center;
    margin-top: 3px;
}
.q_examination {
    margin-left: 25px;
    padding: 10px 10px;
    border: 2px dashed;
}
</style>
